<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的车辆</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../plugins/mui/mui.min.css">
    <link rel="stylesheet" href="../../css/sweetalert/sweetalert.css">
    <script src="../../js/statistics.js"></script>
    <style>
        /*title的样式覆盖*/
        .mui-bar{
            background-color:#2a2c33;
            top:0;
        }
        .mui-bar>a{
            color:#fff;
        }
        .mui-title{
            color:#fff;
        }
        body{
            background-color: #ffffff;
        }
        .mui-content{
            background-color: #ffffff;
        }
        /*my style*/
        .img-box{
            display: -webkit-flex;
            display: flex;
            justify-content:center;
            padding:5.3vw 0;
        }
        .img-box>div{
            text-align: center;
        }
        .img-box>div>div{
            width:42.7vw;
            height:32vw;
            border:1px solid #b2b2b2;
            background: url("../../images/my/index/addbg.png") center center no-repeat;
            background-size:12vw 12vw;
        }
        .img-box>div>span{
            display: block;
            margin-top: 4vw;
            font-size: 15px;
        }
        .img-box>div:first-child{
            margin-right: 5.3vw;
            font-size: 15px;
        }
        .my-title{
            padding:0 3.2vw;
            line-height: 8vw;
            height:8vw;
            font-size: 16px;
            background-color: #f1f1f1;
            color: #333;
        }
        .my-msg>li>span>b{
            display: inline-block;
            width:2em;
        }
        .my-msg{
            padding:0 3.2vw;
            margin:0;
        }
        .my-msg>li{

            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            height:13.2vw;
            align-items: center;
        }
        .my-msg>li>span{
            font-size: 15px;
            color: #333;
        }
        .my-msg>li>input{
            margin-bottom:0;
            padding:0 3.2vw;
            height:7.4vw;
            line-height: 7.4vw;
            width:61vw;
            margin-left:6.9vw;
            font-size: 14px;
            border:1px solid #f1f1f1;
        }
        #toAdd{
            width:100%;
            background: #57B9F3;
            color: #ffffff;
            border: none;
            padding: 0;
            height: 40px;
            line-height: 40px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="back1"></a>
        <h1 class="mui-title">车辆信息</h1>
    </header>
    <div class="mui-content">
        <div class="img-box">
            <div>
                <div id="faceImg">
                    <!--<img src="" id='inImage'/>-->
                </div>
                <span>正面</span>
            </div>
            <div>
                <div id="backImg">
                    <!--<img src="" id='backImage'/>-->
                </div>
                <span>侧面</span>
            </div>
            <!--<input type="file" class="hide" id="upimg" accept="image/jpg, image/png, image/gif, image/jpeg">-->
        </div>
        <div class="my-title"><span>详细信息</span></div>

        <!--<div class="my-title"><span>详细信息</span> <span style="float: right;color: #999;font-size: 12px">修改信息>></span></div>-->
        <ul class="my-msg">
            <li>
                <span>车主姓名：</span>
                <input type="text" placeholder="请输入" id="dName">
            </li>
            <li>
                <span>车牌号码：</span>
                <input type="text" placeholder="请输入" id="num1">
            </li>
            <li>
                <span>发动机号：</span>
                <input type="text" placeholder="请输入" id="num2">
            </li>
            <li></li>
            <li>
                <button id="toAdd">点击添加</button>
            </li>
        </ul>

    </div>
    <script type="text/javascript" src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
    <script src="../../plugins/mui/mui.min.js"></script>
    <script src="../../js/getApiToken.js"></script>
    <script src="../../js/sweetalert/sweetalert.min.js"></script>
    <script src="../../js/md5.js"></script>
    <script type="text/javascript">
        mui.init({});
        mui.plusReady(function(){
            //关闭等待框
            plus.nativeUI.closeWaiting();
            //显示当前页面
//            mui.currentWebview.show('slide-in-right',200);

            //选择图片后,返回按钮bug
            back1.addEventListener("tap",function () {plus.webview.currentWebview().close();});

            //上传函数
            toAdd.addEventListener("tap",function () {sub();});
            //相关协议

            var nowObj,list;//当前是哪块上传
            list=[];
            //绑定上传头像事件
            $('#faceImg').click(function(){
                nowObj=1;
                chooseImgFromAlbums();
            });
            $('#backImg').click(function(){
                nowObj=2;
                chooseImgFromAlbums();
            });
            //从相册选择
            function chooseImgFromAlbums(){
                plus.gallery.pick(function(file) {
                            changeToLocalUrl(file);
                        },
                        function(err) {
                            console.log(JSON.stringify(err));

                        },
                        {
                            filter: 'image',
                            multiple: false
                        });
            }

            //拍照选择图片
            function chooseImgFromPictures() {
                mui('#sheet1').popover('hide');
                var cmr = plus.camera.getCamera();
                cmr.captureImage(function(file) {
                    changeToLocalUrl(file);
                }, function(err) {

                    console.log(JSON.stringify(err));
                }, {
                    index: '2'
                });
            }

            //接受到图片 进行处理
            function changeToLocalUrl(path) {
                plus.io.resolveLocalFileSystemURL(path, function(entry) {
                    entry.file( function ( file ) {
                        if(file.size/1024/1024<5){
                            var multiple=1-(file.size/1024/1024/5).toFixed(1);
                            uploadHead(entry.toLocalURL(),multiple);
                            plus.nativeUI.showWaiting();
                        }else{
                            mui.toast('图片大于5M,请重新上传');
                        }
                    }, function ( e ) {
                        alert( e.message );
                    } );


                });
            }
            //把新头像更新到页面
            function uploadHead(imgPath,b) {
                //		            mainImage.src = imgPath;
                var image = new Image();
                image.src = imgPath;
                image.onload = function() {
                    plus.nativeUI.closeWaiting();
                    var imgData = getBase64Image(image,b);
                    if(nowObj==1){
                        $('#faceImg').css({'background-image':'url('+imgData+')','background-size':'100% 100%'});
                        list[0]=imgData;
                    }else{
                        $('#backImg').css({'background-image':'url('+imgData+')','background-size':'100% 100%'});
                        list[1]=imgData;
                    }
                }
            }
            //将图片压缩转成base64
            function getBase64Image(img,b) {
                var canvas = document.createElement("canvas");
                var width = img.width;
                var height = img.height;
                // calculate the width and height, constraining the proportions
                //图片比例一定的取中间
                var x,y,c,z;
                if (width > height) {
                    x=(width-height)/2;
                    y=0;
                    c=height;
                    z=height;
                } else if(width < height){
                    x=0;
                    y=(height-width)/2;
                    c=width;
                    z=width;
                }else{
                    x=0;
                    y=0;
                    c=width;
                    z=height;
                }
                var clipArea = document.getElementById("clipArea");
                canvas.width = width;   /*设置新的图片的宽度*/
                canvas.height = height; /*设置新的图片的长度*/
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img,0,0,width,height); /*绘图*/
                var dataURL = canvas.toDataURL("image/jpeg",.5);
                return dataURL;
            }

            //确认上传函数
            function sub(){
                if(dName.value.trim()==''){
                    mui.toast('姓名不能为空');
                }else if(num1.value.trim()=='') {
                    mui.toast('车牌号码不能为空');
                }else if(num2.value.trim()==''){
                    mui.toast('发动机号不能为空');
                }else if(!list[0]){
                    mui.toast('请上传车辆照（正面）');
                }else if(!list[1]){
                    mui.toast('请上传车辆照（侧面）');
                }else{
                    var sendData={
                        'user_id': plus.storage.getItem('cg_user_id'),
                        'user_token': plus.storage.getItem('cg_user_token'),
                        'name':dName.value.trim(),
                        'car_number':num1.value.trim(),
                        'engine_number':num2.value.trim(),
                        'mainpath':list[0].substring(23),
                        'backpath':list[1].substring(23)
                    };
                    console.log(JSON.stringify(sendData));
                    plus.nativeUI.showWaiting('上传中...');
                    myAjax('car/car/submit','post',sendData, function(data) {
                    	console.log(JSON.stringify(data));
                        plus.nativeUI.closeWaiting();
                        if(data.success){
                            swal({
                                title: "上传成功",
                                text: "请等待审核结果！",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonColor: "#57B9F3",
                                confirmButtonText: "确认",
                                closeOnConfirm: false
                            },function () {
                                plus.webview.currentWebview().close();
                            })
                        }else{
                            swal({
                                title: "上传失败",
                                text: data.error_msg,
                                type: "error",
                                confirmButtonColor: "#57B9F3",
                                confirmButtonText: "确认",
                                showCancelButton: false,
                                closeOnConfirm: false
                            })

                        }
//                        if(data.success){
//                            mui.toast('上传成功');
//                            plus.webview.currentWebview().close();
//                        }else{
//                            mui.toast(data.error_msg);
//                        }
                    })
                }
            }
        });
    </script>
</body> 
</html> 